import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { Button, Field, Input } from '@taroify/core'
import { observer } from 'mobx-react'
import styles from './user.module.less'
import { appStore } from '@/store/store'
import { loginAccountApi } from '@/request/api'

//
//
function User() {
  useLoad(() => {
    console.log('Page loaded.')
  })

  const [account, setAccount] = useState('')
  const [password, setPassword] = useState('')

  // 用户登录
  const loginAccount = async () => {
    const res = await loginAccountApi(account, password)
    console.log(res)
  }
  const check = () => {
    console.log(account, password)
  }
  return (
    <View className="index">
      <Text>Hello world!</Text>
      <View>User!</View>

      <br />
      <br />

      <View>{appStore.count}</View>

      <br />
      <br />

      <View>
        <View className={styles.item}>
          <Field label="账号">
            <Input
              placeholder="请输入账号"
              value={account}
              onChange={(e) => setAccount(e.detail.value)}
            />
          </Field>
        </View>

        <View className={styles.item}>
          <Field label="密码">
            <Input
              placeholder="请输入密码"
              value={password}
              onChange={(e) => setPassword(e.detail.value)}
            />
          </Field>
        </View>

        <View className={styles.item}>
          <Button color="primary" onClick={loginAccount}>
            登录
          </Button>
        </View>

        <View className={styles.item}>
          <Button color="primary" onClick={check}>
            查看账号密码
          </Button>
        </View>
      </View>
    </View>
  )
}

export default observer(User)
